import * as echarts from "echarts";
import "./tiobe.scss";

import React, { useEffect, useRef, useState } from 'react'

export default function Mianji() {
  const chartRefss = useRef(null);
  const settings = JSON.parse(localStorage.getItem("settings")) || {};
  const [menu, setMenu] = useState(settings.zoomMode);
  const [styles, setstyles] = useState(settings.colorData);
  const [colors, setcolors] = useState(settings.colors);


  function getmianji() {
    let chartInstancess = echarts.init(chartRefss.current);
    chartInstancess.clear()
    const option = {
      // tooltip: {
      //   trigger: "axis",
      //   axisPointer: {
      //     type: "cross",
      //     label: {
      //       backgroundColor: "#6a7985",
      //     },
      //   },
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'line' // 默认为直线，可选为：'line' | 'shadow'
        },
        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: styles[colors][0] //设置文字颜色
        },
      },
      color: styles[colors],
      legend: {
        data: ["邮件邮箱", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
        textStyle: {
          color: styles[colors][0],
        },
      },
      grid: {
        top: "30%",

        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          axisLabel: {
            textStyle: {
              show: true,
              color: styles[colors][0],
            },
          },
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "数量/次",
          // textStyle: {
          color: styles[colors][0],
          // },
          axisLabel: {
            textStyle: {
              show: true,
              color: styles[colors][0],
            },
          },
          nameTextStyle: {
            //y轴上方单位的颜色
            color: styles[colors][0],
          },
          splitLine: { show: false },

        },
      ],
      series: [
        {
          name: "邮件邮箱",
          type: "line",
          stack: "Total",
          areaStyle: {

          },
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "联盟广告",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "视频广告",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "直接访问",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "搜索引擎",
          type: "line",
          stack: "Total",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0.5, color: styles[colors][1] },
                { offset: 1, color: ' rgba(255,255,255,0.2)' },
              ])
            }
          },
          emphasis: {
            focus: "series",
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
    chartInstancess.setOption(option);


    option && window.addEventListener("resize", function () {
      chartInstancess.resize();
    });

  }

  useEffect(() => {
    getmianji()
    if (settings.chartRefreshPeriod) {
      const timer = setInterval(() => {
        getmianji();
      }, settings.chartRefreshPeriod * 1000)
      return () => clearInterval(timer)
    }
  });

  function MenuItem({ menu }) {
    console.log(`MenuItem`, menu);
    switch (menu) {
      case "stretch":
        return (
          <div
            id="ech"
            ref={chartRefss}
            style={{ width: "25vw", height: "310px", margin: "0 auto" }}
          ></div>
        );
      case "cover":
        return (
          <div
            id="ech"
            ref={chartRefss}
            style={{ width: "100%", height: "340px", margin: "0 auto" }}
          ></div>
        );
      case "contain":
        return (
          <div
            id="ech"
            ref={chartRefss}
            style={{ width: "100%", height: "33vh", margin: "0 auto" }}
          ></div>
        );
      default:
        return (
          <div
            id="ech"
            ref={chartRefss}
            style={{ width: "25vw", height: "320px", margin: "0 auto" }}
          ></div>
        );
    }
  }

  return (
    <div className="mianjis">
      <div className="top">面积图</div>
      <MenuItem menu={menu} />
    </div>
  );
}
